<template>
  <Page>
    <p-header :title="title? title : 'Open Orders'"/>
    <ScrollView orientation="vertical">
      <StackLayout v-if="isHistory" class="content">
        <GridLayout v-if="orders.length == 0" class="empty">
          <Image width="73" src="~/images/no-record.png"/>
        </GridLayout>
         <history-item v-for="(item, index) in orders" v-bind:key="index" :order="item" />
      </StackLayout>
       <StackLayout v-if="!isHistory" class="content">
        <GridLayout v-if="orders.length == 0" class="empty">
          <Image width="73" src="~/images/no-record.png"/>
        </GridLayout>
         <order-item v-for="(item, index) in orders" v-bind:key="index" :order="item" :isBuy="isBuy" :onCanceld="orderCanceled"/>
      </StackLayout>
    </ScrollView>
  </Page>
</template>
<script>
import {dataBus} from '~/business/DataBus'
import OrderItem from '~/components/common/OrderItem'
import History from './History'
import Header from '~/components/common/Header'
import HistoryOrderItem from '~/components/common/HistoryOrderItem'
import loaderGen, {loadingOption} from '~/utils/loading'
const platform = require("tns-core-modules/platform")

export default {
  name: 'Orders',
  data() {
    return {
      orders: []
    }
  },
  props: ['pair', 'isBuy', 'isHistory', 'title'],
  components: {
    'p-header': Header,
    'order-item': OrderItem,
    'history-item': HistoryOrderItem
  },
  methods: {
    orderCanceled() {
      this.loadOrders()
    },
    loadOrders() {
      this.loader.show(loadingOption)
      if (this.pair) {
        const self = this
        let pairB = this.pair.split('/')[1]
        let pairA = this.pair.split('/')[0]
        dataBus.loadOrders(pairB, pairA, this.isBuy, {
          onSuccess: (ret) => {
            self.orders = ret
            self.loader.hide()
          },
          onError: (code, msg) => {
            alert(msg)
            self.loader.hide()
          }
        })
      } else if (this.isHistory) {
        this.loadHistoryOrders(0)
      } else {
        this.loadAllOpenOrders()
      }
    },
    loadAllOpenOrders() {
      const self = this
      dataBus.loadAllOpenOrders({
        onError: (code, msg) => {
          alert(msg)
          self.loader.hide()
        },
        onSuccess: (ret) => {
          self.orders = ret
          self.loader.hide()
        }
      })
    },
    loadHistoryOrders(timestamp) {
      const self = this
      dataBus.loadHistoryOrders(timestamp, {
        onError: (code, msg) => {
          alert(msg)
          self.loader.hide()
        },
        onSuccess: (ret) => {
          self.orders = ret
          self.loader.hide()
        }
      })
      // this.orders = [{
      //   "id": "djfdkfs",
      //   "date": "2018-09-01 10:00:00",
      //   "type": "buy",
      //   "price": 0.12321,
      //   "holdingAmount": 0.12321,
      //   "targetAmount": 0.12321,
      //   "baseExecuted": 0.2321,
      //   "averagePrice": 122.11,
      //   "quoteExecuted": 1.111,
      //   "fee": 0.01,
      //   "status": "canceled",
      //   "timestamp": 0,
      //   "quoteCoin":'BTC',
      //   "baseCoin": 'ETH'
      // },
      // {
      //   "id": "djfdkfs",
      //   "date": "2018-09-01 10:00:00",
      //   "type": "sell",
      //   "price": 0.12321,
      //   "holdingAmount": 0.12321,
      //   "targetAmount": 0.12321,
      //   "baseExecuted": 0.2321,
      //   "averagePrice": 122.11,
      //   "quoteExecuted": 1.111,
      //   "fee": 0.01,
      //   "status": "completed",
      //   "timestamp": 0,
      //   "quoteCoin":'BTC',
      //   "baseCoin": 'ETH'
      // }]
    }
  },
  mounted() {
    if (!this.loader) {
      this.loader = loaderGen()
    }
    this.loadOrders()
  }
}
</script>
<style scoped>
page {
  background: #121B2A;
}
.content {
  height: auto;
}
.empty {
  margin-top: 100;
}
</style>

